<template>
      <div class="exam">

            <template v-for="(item, ind) in questData">
                  <div class="backgroun_icon" :key="item.id" v-if="list_active === (ind + 1)">
                        <div class="desc">
                              <div class="desc-time">
                                    <div class="time checkpoint">
                                          <div class="time-text">关卡</div>
                                          <div class="time-num">{{ list_active }}</div>
                                    </div>
                                    <div class="time">
                                          <div class="time-text">{{ timeDesc }}</div>
                                          <div class="time-num">{{ time }}s</div>
                                    </div>
                              </div>

                        </div>
                        <div class="exam_progress">
                              <div class="Group903">
                                    <div class="progress-bar">
                                          <div class="progress" :style="{ width: progressValue + '%' }"></div>
                                    </div>
                              </div>
                        </div>
                        <div class="exam_tips">
                              <div class="tips">
                                    <div>请找出：</div>
                                    <div class="tips-icon" :style="{ backgroundImage: `url(${correctIcon})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center center', backgroundSize: 'contain' }"></div>
                              </div>
                        </div>

                        <div class="exam_card">
                              <div class="card_list">
                                    <div v-for="(card, $index) in cardList" :key="$index" class="card" :class="{ 'card-flipped': cardFlip }" @click="cardClick(item, card, card['index'], $index)" ref="cardsRef">
                                          <div class="face front"></div>
                                          <div class="face back" :class="{ 'flip': cardFlip }" :style="{ backgroundImage: `url(${card['logoImgUrl']})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center center', backgroundSize: 'contain' }">
                                          </div>

                                    </div>
                              </div>
                        </div>
                  </div>
            </template>
            <audio class="exam_audio" controls :src='examUrl' autoplay ref="examPlayer" :preload="false" playsinline>
            </audio>
            <Propover :showSelect="showSelect">
                  <div class="startGame" v-if="showModalIndex === 4">
                        <van-button color="#117BD6" round type="primary" class="button-primary" @click="startGame">开始游戏</van-button>
                  </div>
                  <ExamSelect :questEvent="questEvent" @select-click="selectClick" v-if="showModalIndex === 6"></ExamSelect>
                  <ExamSuccessful @modleClick="modleClick" v-if="showModalIndex === 7"></ExamSuccessful>
                  <ExamAgain @modleClick="playAgain" :modleDesc="modleDesc" :againDesc="againDesc" v-if="showModalIndex === 8"></ExamAgain>
            </Propover>

      </div>
</template>

<script lang="ts" setup name="exam">
import { ref, onMounted, nextTick, computed } from 'vue'
import examMusic from "./components/examMusic.vue"
import Propover from "./components/propover.vue"
import ExamSelect from "./components/examSelect.vue"
import ExamSuccessful from "./components/examSuccessful.vue"
import ExamAgain from "./components/examAgain.vue"
import ClearedByCustoms from "@/static/music/clearedByCustoms.mp3"
import WrongChoice from "@/static/music/WrongChoice.mp3"
import { getQuestionList, submitQuestion } from "@/api/index" // 获取题库和提交用户答题的接口
const questData = ref([]) // 题库
const list_active = ref(1) // 游戏关卡
const getQuest = async () => { // 获取选择题题库
      let data = {
            bizType: 1
      }
      await getQuestionList(data).then(res => {
            const { code, data } = res
            if (code === 0) {
                  questData.value = data
                  nextTick(() => {
                        init()
                  })
            }
      })
}
const isPass = ref(null) // 是否通关， 0 否 1是
const startTime = ref(null)  // 游戏开始时间
const endTime = ref(null) // 游戏结束时间
const totalTime = ref(null) // 玩游戏的时长
const examUrl = ref("") // 游戏特效音乐
const examPlayer = ref()
const start = () => { // 游戏开始计时 时长
      startTime.value = new Date().getTime();
}
const submit = async () => { // 提交用户答题结果
      let userId = localStorage.getItem('TOKEN')
      let data = {
            answerTime: totalTime.value,
            currentLevel: list_active.value,
            isPass: isPass.value,
            userId: userId,
            optionsList: findCardData.value
      }
      await submitQuestion(data).then(res => {
            findCardData.value = []
      })
}

const [TM1, TM2] = [10, 40] // 记忆时间 ， 倒计时
const cardsRef = ref() // 翻牌卡牌 ref
const cardList = ref([]) // 卡牌数组数据
const cardFlip = ref("") // 卡牌翻转的仪式
const isLock = ref(0) // 游戏状态
const time = ref(TM1) // 游戏计时器
let timer = ref(null) // 计时器
const correctIcon = ref("") // 正确图片
const cardData = ref([]) // 正确的图标随机索引
const wnogsData = ref([]) // 其他的图标随机索引
const modleDesc = ref('再次挑战') // 弹框text
const againDesc = ref('')
const timeDesc = ref('记忆时间')

const progressValue = ref(0) // 进度条

import { generateRandomIcons } from "./util/util"
const cardInit = () => {
      cardList.value = []
      cardData.value = []
      wnogsData.value = []
      let { examList, examData, examArr, correctIndex } = generateRandomIcons(list_active.value);
      cardList.value = [...examList]
      console.log(cardList.value);

      cardData.value = [...examData]
      wnogsData.value = [...examArr]
      correctIcon.value = correctIndex
      // cardDom()
}

const init = async () => { // 初始化
      clearTime()

      cardInit()
      time.value = TM1
      timeDesc.value = "记忆时间"
      timer.value = null
      cardFlip.value = ""
      progressValue.value = 0

      if (cardsRef.value) {
            cardList.value.forEach((res, index) => {
                  cardsRef.value[index].className = "card"
            })
      }
      isLock.value = 0
      timer.value = setTimeout(() => {
            startGame()
      }, 1000)

}
import { showToast } from "@/utils/message"
const startGame = () => {
      showToast("准备开始记忆啦~", 1000);

      if (isLock.value === 0) {
            clearTime()
            isLock.value = 1
            cardFlip.value = "card-flipped"
            countdown()

      }
}

const countdown = () => {
      if (time.value === 0) {
            if (isLock.value === 1) {
                  cardFlip.value = ""
                  timeDesc.value = "倒计时"
                  time.value = TM2
                  clearTime()
                  startPlaying()
            } else {
                  timeDesc.value = '记忆'
                  time.value = TM1
                  clearTime()

                  showModal(8)
            }
      } else {
            // console.log("isLock =》：", isLock.value, 'time 有值：', time.value, '进度条：', progressValue.value);
            if (isLock.value === 2 && time.value !== 0) {
                  Progress()
            }
            time.value--
            timer.value = setTimeout(() => {
                  countdown()
            }, 1000)
      }
}
const startPlaying = () => {
      setTimeout(() => {
            isLock.value = 2
            countdown()

      }, 0)
}
let intervalId = ref(null)
const Progress = () => {
      if (progressValue.value < 100) {
            let num = 100 / TM2
            num = Number(num.toFixed(1))
            progressValue.value += num;
      }
      // intervalId.value = setInterval(() => {
      //       if (progressValue.value < 100) {
      //             let num = 100 / time.value
      //             num = Number(num.toFixed(1))
      //             progressValue.value += num;
      //       } else {
      //             clearInterval(intervalId.value);
      //       }
      // }, 1000);
}
const clearTime = () => {
      clearTimeout(timer.value)
      clearInterval(intervalId.value);
}
const showSelect = ref(false)
const showModalIndex = ref(null)
const showModal = (index) => {
      clearTime()
      showSelect.value = true
      showModalIndex.value = index
      // examTogglePlay()
      if (showModalIndex.value === 8) {
            againDesc.value = "时间到了哟~"
      }
}
const cardSelectedArr = ref([])
const findCardData = ref([])
const questEvent = ref(null)
const hasClass = (function () {
      var div = document.createElement("div");
      if ("classList" in div && typeof div.classList.contains === "function") {
            return function (elem, className) {
                  return elem.classList.contains(className);
            };
      } else {
            return function (elem, className) {
                  var classes = elem.className.split(/\s+/);
                  for (var i = 0; i < classes.length; i++) {
                        if (classes[i] === className) {
                              return true;
                        }
                  }
                  return false;
            };
      }
})()
let fcardTimer = ref(null)
const cardClick = (questItem: object, card: string | number, cardIndex: string | number, index: number) => {
      if (isLock.value === 2) {
            let $fcards = cardsRef.value
            let $fcard = $fcards[index]
            if (hasClass($fcard, "card-flipped")) {
                  return;
            }
            console.log(cardData.value);

            if (cardData.value.every((item, index) => item.index !== cardIndex)) {
                  $fcards.className = "card"
                  $fcard.className = "card card-flipped"
                  console.log('不符合里面的数据');

                  examTogglePlay(2)
                  // clearTime()
                  // showModal(8)


                  fcardTimer.value = setTimeout(function () {
                        fcardClassNmae()
                  }, 600)
                  // againDesc.value = "答题错误"
                  // modleDesc.value = "再次挑战"
                  return false
            }
            cardSelectedArr.value.push({ key: index, value: cardIndex })
            $fcards.className = "card"
            $fcard.className = "card card-flipped"
            if (list_active.value === questData.value.length) modleDesc.value = "恭喜你闯关成功"
            let active
            if (list_active.value <= 10) {
                  active = 3
            } else if (list_active.value >= 11 && list_active.value <= 20) {
                  active = 4
            }
            if (cardSelectedArr.value.length === active) {
                  if (cardData.value.every((item, index) => item.index === cardSelectedArr.value[index].value)) {
                        questEvent.value = questItem
                        console.log('相等');

                        examTogglePlay(1)
                        clearTime()
                        showModal(6)
                        // examTogglePlay(0)

                  } else {
                        showModal(8)
                        // getQuest()
                        // init()

                  }
            }
      }
}
const fcardClassNmae = () => {
      // fcards.className = "card"
      // fcard.className = "card"
      cardList.value.forEach((res, index) => {
            cardsRef.value[index].className = "card"
      })
      cardSelectedArr.value = []
      console.log(cardSelectedArr.value);
      clearTimeout(fcardTimer.value)
      // clearTime()
}
const isExamPlay = ref(false) // 游戏特效音乐播放状态
const examTogglePlay = (playIndex?: number) => {
      let examPlaye = examPlayer.value
      if (!isExamPlay.value) {
            examUrl.value = playIndex === 1 ? ClearedByCustoms : (playIndex === 2 ? WrongChoice : '')
            examPlaye.load()
            examPlaye.addEventListener('canplaythrough', () => {
                  examPlaye.play()
            })
            isExamPlay.value = false
            console.log('播放')

      } else {
            clearTime()
            examUrl.value = ''
            examPlaye.pause()
            isExamPlay.value = false
            console.log('暂停')
      }

}
interface selectObj {
      isOp: boolean,
      userOption: string,
      event: object
}
const closeModal = () => {
      showModalIndex.value = null;
      showSelect.value = false
      if (isLock.value !== 0) {
            countdown();
      }
}
const selectClick = ({ isOp, userOption, event }: selectObj) => { // 选择题选项
      clearTime()
      findCardData.value.push({ ...event, userOption: userOption })
      if (isOp) {
            if (list_active.value === questData.value.length) {
                  examTogglePlay(1)
                  showModalIndex.value = 8
                  againDesc.value = "答题完成"
                  modleDesc.value = "恭喜你闯关成功"
            } else {
                  examTogglePlay(1)
                  showModalIndex.value = 7
            }
      } else {
            examTogglePlay(2)
            againDesc.value = "答题错误"
            showModalIndex.value = 8

      }
}
const modleClick = () => { // 下一关
      clearTime()
      cardSelectedArr.value = []
      if (list_active.value < questData.value.length) {
            list_active.value++
      }
      showModalIndex.value = null;
      showSelect.value = false
      init()
}
const playAgain = (event: string) => { // 再次跳转/ 恭喜你闯关成功
      clearTime()
      if (event == '再次挑战') {
            cardSelectedArr.value = []
            cardList.value = []
            isPass.value = 0
            timeTotal()
            if (findCardData.value.length) {
                  submit()
            }
            closeModal()
            getQuest()
            list_active.value = 1
            init();
      } else {
            isPass.value = 1
            examTogglePlay(1)
            timeTotal()
            submit()
      }
}

const timeTotal = () => { // 整体游戏时长
      endTime.value = new Date().getTime();
      totalTime.value = Math.floor((endTime.value - startTime.value) / 1000); // 计算整体秒数时间

}
// const exanCardList = computed(() => {
//       if (cardList.value.length) {
//             return cardList.value
//       }
// })
onMounted(() => {
      getQuest()
      start()

})
</script>


<style scoped>
@import "./style.css";
</style>
